<extend name="Public/base"/>
<block name="head">
	<link href="__CSS__/topic.css" rel="stylesheet">
</block>
<block name="body">
<div class="container" >
    <div class="row">
        <div class="col-md-8 topic-box">
            <volist name="_list" id="data">
                    <div class="item clear">
                       
	                        <div class="img">
	                        	<img class="img-responsive" alt="{$data.title}" src="{$data.pic_url|get_image_url}">
	                        </div>
	                         <a href="{:U('topic/detail',array('id'=>$data['id']))}">
		                        <div class="info">
		                        	 <h3 class="">
			                        	{$data.title}
			                        </h3>
	                            	<p class="discription">{$data['subtitle']}</p>
		                        </div>
	                        </a>                
                    </div>
	                       
                        
             </volist>
        </div>
        <div class="col-md-4">
            <div class="tc-box first-box">
                <div class="headtitle">
                    <h3>热门专题</h3>
                </div>
                <div class="news-label col-md-12">
					<ul class="col-md-12 hot-topic">
					<volist name="hot_topic" id="data">					
						<li class="list-unstyled">
							<a href="{:U('Topic/detail?id='.$data['id'])}">
								<div>
									<img class="img-responsive" alt="{$data.title}" src="{$data.pic_url}">
								</div>
								<h5>{$data.title}</h5>
							</a>
						</li>
					</volist>
					
				</ul>
				</div>
            </div>
        </div>
    </div>
    <notempty name="_page">
    	 <div class="row">
	        	<div class="col-md-12">
	        		<nav>
					  <ul class="pagination">
					    {$_page}
					  </ul>
					</nav>
	            
	            </div>
	      </div>
</notempty>
</div>

</block>
<block name="script">
<script>
	$(function(){
		$('.topic-box .item').hover(
			function(){
				$(this).find('.info').show();
			},function(){
				$(this).find('.info').hide();
			}
		);
		$('.hot-topic').find('li').each(function(){
			
			$(this).hover(
				function(){
					$(this).addClass('active');
				},function(){
					$(this).removeClass('active');
				}
			);
		
		});
	highlight_subnav("{:U('Topic/index')}"); 
		
	});
</script>
</block>

